<template>
  <div>
    <r-search ref="search" :searchData="searchData" :searchForm="searchForm" :searchHandle="searchHandle"
      :inline="true" />
    <div>
      <span>入账总金额：{{ params.inTotalMoney }}</span>
      <span class="ml20">出账总金额：{{ params.outTotalMoney }}</span>
    </div>
    <r-table class="mt20" :isPagination="true" :isHandle="true" :tableData="tableData" :tableCols="tableCols"
      :tablePage="pagination" :loading="tableLoading" :tableHandles="tableHandles" :isSelection="false"
      @refresh="page()" />

    <!-- 提现按钮--表单 -->
    <el-dialog title="提现" :visible.sync="withdrawDialog" width="600px" :before-close="withdrawDialogClose">
      <div class="plr30">
        <el-form :model="widthdrawForm" ref="widthdrawForm" label-width="120px" label-position="left"
          :rules="widthdrawRuleForm">
          <el-form-item label="可提现余额">
            <span>{{ withdrawInfo.withdrawMoney }}元</span>
          </el-form-item>
          <el-form-item label="提现金额(元)" prop="money">
            <el-input type="number" min="1" v-model="widthdrawForm.money"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="withdrawDialogClose">取 消</el-button>
        <el-button type="primary" @click="withdrawRecord_save">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 提现记录按钮--表单 -->
    <el-dialog title="提现记录" :visible.sync="withdrawDialoGrecord" width="90%" :before-close="withdrawDialogClose">
      <div class="plr30">
        <el-table v-loading="loading" :data="roleList">
          <el-table-column label="提现状态" align="center">
            <template slot-scope="scope">
              {{ scope.row.status == 3 ? '不通过' : scope.row.status == 2 ? '通过' : '待审核' }}
            </template>
          </el-table-column>
          <el-table-column label="提现金额" align="center">
            <template slot-scope="scope">
              {{ scope.row.money ? scope.row.money : nulls }}
            </template>
          </el-table-column>
          <el-table-column label="当前余额" align="center">
            <template slot-scope="scope">
              {{ scope.row.currentMoney ? scope.row.currentMoney : nulls }}
            </template>
          </el-table-column>
          <el-table-column label="银行名称" align="center">
            <template slot-scope="scope">
              {{ scope.row.bankName ? scope.row.bankName : nulls }}
            </template>
          </el-table-column>
          <el-table-column label="银行卡号" align="center">
            <template slot-scope="scope">
              {{ scope.row.bankCard ? scope.row.bankCard : nulls }}
            </template>
          </el-table-column>
          <el-table-column label="开户行" align="center">
            <template slot-scope="scope">
              {{ scope.row.bankDeposit ? scope.row.bankDeposit : nulls }}
            </template>
          </el-table-column>
          <el-table-column label="手机号" align="center">
            <template slot-scope="scope">
              {{ scope.row.bankPhone ? scope.row.bankPhone : nulls }}
            </template>
          </el-table-column>
          <el-table-column label="订单号" align="center">
            <template slot-scope="scope">
              {{ scope.row.orderNo ? scope.row.orderNo : nulls }}
            </template>
          </el-table-column>
          <el-table-column label="提现ID" align="center">
            <template slot-scope="scope">
              {{ scope.row.id ? scope.row.id : nulls }}
            </template>
          </el-table-column>
          <el-table-column label="提现不通过原因" align="center">
            <template slot-scope="scope">
              {{ scope.row.rejectReason ? scope.row.rejectReason : nulls }}
            </template>
          </el-table-column>
          <el-table-column label="提现时间" align="center">
            <template slot-scope="scope">
              {{ scope.row.ctime ? scope.row.ctime : nulls }}
            </template>
          </el-table-column>

        </el-table>
      </div>
      <!-- <span slot="footer" class="dialog-footer">
        <el-button @click="withdrawDialogClose">取 消</el-button>
        <el-button type="primary" @click="withdrawRecord_save">确 定</el-button>
      </span> -->
    </el-dialog>
  </div>
</template>

<script>
import VueQr from "vue-qr";
export default {
  components: { VueQr },
  data() {
    // 提现金额的校验规则
    const checkMoney = (rule, value, callback) => {
      if (value <= 0) {
        callback(new Error("提现金额需大于零"));
      } else if (value > this.withdrawInfo.withdrawMoney) {
        callback(new Error("提现金额不能超过可提现余额!"));
      } else {
        callback();
      }
    };
    return {
      withdrawInfo: {
        codeUrl: "",
        agentId: "",
        phone: "",
        withdrawMoney: 0,
      },
      // 提现按钮--表单的开关
      withdrawDialog: false,
      // 提现记录按钮--表单的开关
      withdrawDialoGrecord: false,
      // 遮罩层
      loading: false,
      // 角色表格数据
      roleList: [],
      nulls: '--',
      // 提现按钮--表单
      widthdrawForm: {
        money: "",//提现金额
      },
      // 提现按钮校验
      widthdrawRuleForm: {
        money: [
          { required: true, message: "提现金额不能为空" },
          { validator: checkMoney, trigger: "blur" },
        ],
      },
      searchData: {
        orderNo: "",
        userType: "",
        type: "",
        payType: "",
        // beginTime: "",
        // endTime: "",
      },
      searchForm: [
        { type: "input", placeholder: "订单编号", prop: "orderNo", width: 200 },
        {
          type: "select",
          placeholder: "交易对象",
          prop: "userType",
          width: 200,
          options: [
            { label: "普通用户", value: "1" },
            { label: "运营商", value: "2" },
            { label: "代理商", value: "3" },
          ],
        },
        // {
        //   type: "daterange",
        //   placeholder: "交易时间",
        //   prop: "date",
        //   width: 300,
        //   change: (val) => {
        //     if (val) {
        //       this.searchData.beginTime = val[0];
        //       this.searchData.endTime = val[1];
        //     } else {
        //       this.searchData.beginTime = "";
        //       this.searchData.endTime = "";
        //     }
        //   },
        // },
        // {
        //   type: "date", placeholder: "开始日期", prop: "beginTime", width: 170, change: (val) => { this.searchData.beginTime = val }
        // },
        // {
        //   type: "date", placeholder: "结束日期", prop: "endTime", width: 170, change: (val) => { this.searchData.endTime = val }
        // },
        {
          type: "select",
          placeholder: "交易方式",
          prop: "payType",
          width: 200,
          options: [
            { label: "微信", value: 1 },
            { label: "余额", value: 2 },
            { label: "银行卡", value: 3 },
          ],
        },
        {
          type: "select",
          placeholder: "交易类型",
          prop: "type",
          width: 200,
          options: [
            { label: "租换电消费", value: "1" },
            { label: "充电消费", value: "2" },
            { label: "租车消费", value: "3" },
            { label: "用户充值", value: "4" },
            { label: "订单退款", value: "5" },
            { label: "代理商提现", value: "6" },
            { label: "押金缴纳", value: "7" },
            { label: "押金提现", value: "8" },
          ],
        },
      ],
      searchHandle: [
        { type: "primary", label: "搜索", handle: (e) => this.getData() },
        {
          type: "success",
          label: "提现",
          isShow: (e) => sessionStorage.role == "agent",
          handle: (e) => {
            this.withdrawDialog = true;
            this.widthdrawForm = {
              money: "0",//提现金额

            }
          },
        },
        {
          type: "primary",
          label: "提现记录",
          isShow: (e) => sessionStorage.role == "agent",
          handle: (e) => {
            this.withdrawDialoGrecord = true;
            this.testButton()
          },
        },
        // {type:'primary',label:'重置', handle: e => this.elFormSubmit(),}
      ],
      tableLoading: false,
      tableData: [],
      params: {
        inTotalMoney: '',
        outTotalMoney: '',
      },
      tableCols: [
        { label: "订单编号", prop: "orderNo" },
        {
          label: "订单类型",
          prop: "type",
          formatter: (row) => {
            if (row.type == 1) {
              return "租换电消费";
            } else if (row.type == 2) {
              return "充电消费";
            } else if (row.type == 3) {
              return "租车消费";
            } else if (row.type == 4) {
              return "用户充值";
            } else if (row.type == 5) {
              return "订单退款";
            } else if (row.type == 6) {
              return "代理商提现";
            } else if (row.type == 7) {
              return "押金缴纳";
            } else if (row.type == 8) {
              return "押金提现";
            } else if (row.type == 9) {
              return "领取红包(新用户）";
            } else {
              return "--";
            }
          },
        },
        {
          label: "交易对象",
          prop: "userType",
          formatter: (row) => {
            if (row.userType == 1) {
              return "普通用户";
            } else if (row.userType == 2) {
              return "运营商";
            } else if (row.userType == 3) {
              return "代理商";
            } else {
              return "未知用户"
            }
          },
        },
        { label: "手机号", prop: "phone" },
        { label: "对象信息", prop: "userName" },
        { label: "交易金额", prop: "money" },
        {
          label: "交易方式",
          prop: "payType",
          formatter: (row) => {
            if (row.payType == 1) {
              return "微信";
            } else if (row.payType == 2) {
              return "余额";
            } else if (row.payType == 3) {
              return "银行卡";
            } else {
              return "未知";
            }
          },
        },
        { label: "交易时间", prop: "ctime" },
      ],
      tableHandles: [
        // {
        //   label: "导出",
        //   type: "primary",
        //   handle: e => this.elFormVisible()
        // },
      ],
      pagination: { limit: 10, offset: 1, total: 1 },
    };
  },
  created() { },
  mounted() {
    this.getData();
    if (sessionStorage.role == "agent") {
      this.withdrawRecord_getAgentInfo();
    }
  },
  methods: {
    async testButton() {
      const res = await this.apis.withdrawRecordAgentId(this.withdrawInfo.agentId);
      console.log(22222222333, res.rows);
      this.roleList = res.rows
    },
    // 获取代理商提现 - 账户信息
    async withdrawRecord_getAgentInfo() {
      const res = await this.apis.withdrawRecord_getAgentInfo();
      this.withdrawInfo = res.data;
      console.log('金额', this.withdrawInfo.withdrawMoney);
    },
    // 提现按钮--表单--取消按钮
    withdrawDialogClose() {
      this.withdrawDialog = false;
      this.withdrawDialoGrecord = false;
      this.withDrawMoney = "";
    },
    // 提现按钮--表单--确认按钮
    withdrawRecord_save() {
      this.$refs.widthdrawForm.validate(async (valid) => {
        if (valid) {
          const res = await this.apis.withdrawRecord_save(this.widthdrawForm);
          this.$message({
            message: "操作成功",
            type: "success",
          });
          this.withdrawDialog = false;
          if (sessionStorage.role == "agent") {
            this.withdrawRecord_getAgentInfo();
          }
        }
      });
    },
    async usersys_updata(row) {
      var res = await this.apis.usersys_updata({
        id: row.id,
        state: row.state == 34 ? 35 : 34,
      });
      this.getData();
    },
    async getData() {
      var res = await this.apis.tradeRecord_list({
        orderNo: this.searchData.orderNo,
        userType: this.searchData.userType,
        type: this.searchData.type,
        payType: this.searchData.payType,
        params: this.searchData.params,
        pageNum: this.pagination.offset,
        pageSize: this.pagination.limit,
      });
      // console.log(res);
      var list = res.rows || [];

      this.tableData = list;
      this.params = res.params;
      this.pagination.total = res.total;
    },
    page() {
      this.getData();
    },
  },
};
</script>

<style scoped lang="scss">

</style>
